<template>

  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>用户管理</span>
      </div>
    </template>
    <!-- 查询部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查询内容">
        <el-input v-model="formInline.content" :placeholder="formInline.region === 'username' ? '请输入用户名' : '请输入用户ID'" clearable />
      </el-form-item>
      <el-form-item label="查询类别">
        <el-select v-model="formInline.region" placeholder="请选择想要查询的类别" clearable>
          <el-option label="用户名" value="username" />
          <el-option label="用户ID" value="id" />
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据展示 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="用户id"   />
      <el-table-column prop="username" label="用户名"   />
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" />
      <el-table-column prop="role" label="用户身份" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button type="success" size="small" @click="deleteUser(scope.row.id)">删除用户</el-button>
          <el-button type="info" size="small" @click="openS(scope.row.id)">查看当前用户问卷</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
  </el-card>
</template>

<script>
import { ElMessage ,ElNotification} from 'element-plus'
import axios from 'axios';
import {onMounted,ref} from "vue";
import request from '../utils/request';
export default {
  setup(){
    const formInline = ref({
      content:'',
      region:''
    });

    const tableData = ref([]);

    const load = async ()=>{
      const token = localStorage.getItem('token');
      const config = {
        method:'get',
        url:'api/user/select',
      };

      try{
        const response = await request(config);
        tableData.value = response.data;
      }catch (error){
        console.error(error);
      }
    };

    onMounted(()=>{
      load();
    });

    const onReset = ()=>{
      formInline.value = '';
      load();
    };

    const onSubmit = ()=>{
      let params = {};
      const token = localStorage.getItem('token');
      if(formInline.value.region==='username'){
        params = {
          username:formInline.value.content,
          id:''
        };
      }else if(formInline.value.region==='id'){
        params = {
          id:formInline.value.content,
          username:''
        };
      }

      console.log(params);
      console.log(token);
      request.get('api/user/select',{params})
      .then(res => {
        console.log('返回数据',res.data);
        tableData.value = res.data.data;
      })
          .catch((error) => {
            console.error(error);
          })
    };

    const deleteUser = (id) => {}
    const openS = (id) => {}
    return {
      formInline,
      tableData,
      onSubmit,
      onReset,
      deleteUser,
      openS
    };
  }
}

</script>
